/*
 * @Author: tomystery 
 * @Date: 2018-07-15 11:49:28 
 * @Last Modified by: t
 * @Last Modified time: 2018-07-15 17:28:04
 * @fielname:订单详情
 */

import React from 'react';
import PageTitle from 'component/page-title/index.jsx';

import MUtil from 'util/mm.jsx';
const _mm = new MUtil();

import Order from 'service/order-service.jsx';
const _order = new Order();
import './index.scss';

class OrderDetail extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            orderNo: this.props.match.params.pid,
            createTime: '',
            receiverName: '',
            statusDesc: '',
            paymentTypeDesc: '',
            payment: ''


        }
    }
    //加载它
    componentDidMount() {
        this.loadOrderDetail();

    }
    //加载商品详情
    loadOrderDetail() {
        //如果有id就回填出来
        if (this.state.orderNo) {
            _order.getOrderDetail(this.state.orderNo).then((res) => {

                this.setState(res)
            })
        }
    }

    //发货
    onSendGoods(){
        if(window.confirm('是否确认该订单已经发货？')){
            _order.sendGoods(this.state.orderNumber).then((res) => {
                _mm.successTips('发货成功');
                this.loadOrderDetail();
            }, (errMsg) => {
                _mm.errTips(errMsg);
            });
        }
    }

    render() {
        const { orderNo, createTime, receiverName, statusDesc, paymentTypeDesc, payment, imageHost, status
        } = this.state

        let productList = this.state.orderItemVoList || []



        let tableBody = productList.map((item, index) => {
            return <tr key={index}>
                <td><img className="p-img" src={`${imageHost}${item.productImage}`} alt={item.productName} /></td>
                <td>{item.productName}</td>
                <td>¥{item.currentUnitPrice}</td>
                <td>{item.quantity}</td>
                <td>¥{item.totalPrice}</td>
            </tr>
        })

        return (
            < div id='page-wrapper' >
                <div className='row'>
                    <div className='col-md-12'>
                        <PageTitle title='订单详情' />
                    </div>
                </div>
                <div className="form-horizontal">
                    <div className="form-group">
                        <label className="col-sm-2 control-label">订单号</label>
                        <div className="col-sm-10">
                            <p className="form-control-static">{orderNo}</p>

                        </div>
                    </div>
                    <div className="form-group">
                        <label className="col-sm-2 control-label">创建时间</label>
                        <div className="col-sm-10">
                            <p className="form-control-static">{createTime}</p>
                        </div>
                    </div>
                    <div className="form-group">
                        <label className="col-sm-2 control-label">收件人</label>
                        <div className="col-sm-10">
                            <p className="form-control-static">{receiverName}</p>
                        </div>
                    </div>
                    <div className="form-group">
                        <label className="col-sm-2 control-label">订单状态</label>
                        <div className="col-sm-10">
                            <p className="form-control-static">
                                {statusDesc}
                                {status === 20 ? <button className="btn btn-default btn-sm btn-send-goods"
                                    onClick={(e) => { this.onSendGoods(e) }}>立即发货</button>
                                    : null}

                            </p>
                        </div>
                    </div>
                    <div className="form-group">
                        <label className="col-sm-2 control-label">支付方式</label>
                        <div className="col-sm-10">
                            <p className="form-control-static">{paymentTypeDesc}</p>
                        </div>
                    </div>
                    <div className="form-group">
                        <label className="col-sm-2 control-label">订单金额</label>
                        <div className="col-sm-10">
                            <p className="form-control-static">{payment}</p>
                        </div>
                    </div>
                    <div className="col-md-12">
                        <table className="table table-striped table-bordered table-hover">
                            <thead>
                                <tr >
                                    <th style={{ width: '15%' }}>商品图片</th>
                                    <th style={{ width: '40%' }}>商品信息</th>
                                    <th style={{ width: '15%' }}>单价</th>
                                    <th style={{ width: '15%' }}>数量</th>
                                    <th style={{ width: '15%' }}>合计</th>
                                </tr>
                            </thead>
                            <tbody>
                                {tableBody}
                            </tbody>
                        </table>
                    </div>



                </div>
            </div >
        )
    }
}
export default OrderDetail